<template>
	<view class="border">
		<form action="" method="post">
			<view class="">
				<text class="mima">姓名:</text>
				<input type="text" placeholder="请输入姓名" v-model="register.name" class="mimainp" prop="">
			</view>
			<view class="">
				<text class="mima">手机号:</text>
				<input type="text" placeholder="请输入手机号" v-model="register.mobile" class="mimainp">
			</view>
			<view class="">
				<view class="">
					性别:
				</view>
				<uv-radio-group
				    v-model="radiovalue1"
				    placement="column"
				    @change="groupChange"
				  >
				    <uv-radio
				      :customStyle="{marginBottom: '8px'}"
				      v-for="(item, index) in radiolist1"
				      :key="index"
				      :label="item.name"
				      :name="item.name"
				      @change="radioChange"
				    >
				    </uv-radio>
				  </uv-radio-group>
			</view>
			<view class="">
				<text class="mima">密码:</text>
				<input type="password" placeholder="请输入密码" v-model="register.password1" class="mimainp">
			</view>
			<view class="">
				<text class="mima">二次密码:</text>
				<input type="password" placeholder="请再次输入密码" v-model="register.password2" class="mimainp">
			</view>
			<!-- <view class="fix" @click="fix" style="float: left;">
				修改密码
			</view>
			<view class="registe" @click="registe" style="float: right;">账号注册</view> -->
			<view class="btn" @click="registe" style="margin: o auto;">
				<button>注册</button>
			</view>
		</form>
	</view>
</template>

<script>
	// import {register} from '../../API/register/register.js'

	export default {
		data() {
			return {
				 radiolist1: [{
				            name: '男',
				            disabled: false
				          },
				            {
				              name: '女',
				              disabled: false
				            }
				          ],
				          // uv-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				          radiovalue1: '男',
				// items: [{
				// 		value: '1',
				// 		name: '男'
				// 	},
				// 	{
				// 		value: '2',
				// 		name: '女'
				// 	}
				// ],
				current: 0,
				register: {
					name: '',
					gender: 1,
					mobile: '',
					password1: '',
					password2: ''
				}

			}
		},
		methods: {
			groupChange(n) {
			        console.log('groupChange', n);
					console.log(this.register.gender)
					if(n == '男'){
						this.register.gender = 1
					} else {
						this.register.gender = 2
					}
					console.log(this.register.gender)
			      },
			      radioChange(n) {
			        console.log('radioChange', n);
			      },
			// radioChange: (evt) => {
			// 	for (let i = 0; i < this.items.length; i++) {
			// 		if (this.items[i].value === evt.detail.value) {
			// 			this.current = i;
			// 			break;
			// 		}
			// 	}
			// 	this.register.gender = this.items[evt].value
			// 	console.log(this.register.gender)
			// },
			registe() {
				var form = {
					// id:1,
					name: this.register.name,
					gender: this.register.gender,
					mobile: this.register.mobile,
					password1: this.register.password1,
					password2: this.register.password2
				}
				if(this.register.name == '' || this.register.gender == null || this.register.mobile == '' || this.register.password1 == '' || this.register.password2 == ''){
					uni.showToast({
						title:'有信息未输入',
						icon:'none'
					})
				} else if(this.register.password1 != this.register.password2){
					uni.showToast({
						title: '两次密码输入有误',
						icon:'none'
					});
				} else if(this.register.mobile.length != 11) {
					uni.showToast({
						title:'手机位数不正确',
						icon:'none'
					})
				} else {
					console.log(form)
					uni.request({
					url:'http://111.230.59.120:80/kaoping/register/',
					method:'POST',
					data:form,
					success: res => {
						console.log(res)
						if(res.data.code == 200){
							uni.showToast({
								title:'注册成功',
								icon:'success',
								success: (res) => {
									uni.navigateTo({
										url:'../login/login'
									})
								}
							})
						} else if(res.data.code == 400){
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						} else {
							uni.showToast({
								title:'两次密码输入有误',
								icon:'none'
							})
						}
					},
					fail:res => {
						console.log(res)
						uni.showToast({
							title:'网络异常，请检查网络连接',
							icon:'none'
						})
					}
				})
				}
				
			}
		}
	}
</script>

<style>
	.mima {
		position: absolute;
		left: 30rpx;
	}


	.mimainp {
		margin-left: 150rpx;
		margin-top: 30rpx;
	}

	.btn {
		background-color: skyblue;
		width: 320rpx;
		margin-left: 200rpx;
	}

	.btn button {
		width: 320rpx;
		margin-top: 100rpx;
		background-color: lightskyblue;
	}

	.fix,
	.registe {
		margin-top: 30rpx;
	}

	.border {
		width: 700rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		/* border: 2px solid black; */

	}
</style>